<template>
	<view>
		<nav_bar title='我的'></nav_bar>
		<view style="height: 56px;"></view>
		<view class="img_box">
			<u--image class="imgs" :showLoading="true" :src="src" width="80px" height="80px" shape="circle"></u--image>
			<!-- 信息区域 -->
			<ul class="message">
				<li style="padding-bottom: 15px;">
					<u-icon labelColor='#FFF' color='#FFF' :label="this.username" size="25" name="account-fill"></u-icon>
				</li>
				<li>
					<u-icon labelColor='#FFF' color='#FFF' :label="phone" size="25" name="phone-fill"></u-icon>
				</li>
			</ul>
			<view class="user_edit" @click="headle_userEdit">
				<u-icon size="30" color='#FFF' name='arrow-right-double'></u-icon>
			</view>
		</view>
		<view class="account">
			<view class="box">
				<view style="font-weight: 800; color: #FF9B06; font-size: 30px;!important ">
					0.00<text style="color: black; font-weight: 400">元</text>
				</view>
				<view>我的余额</view>
			</view>
			<view class="box">
				<view style="font-weight: 800; color: #FF5F3E; font-size: 30px;!important ">
					0<text style="color: black; font-weight: 400">个</text>
				</view>
				<view>我的优惠</view>

			</view>
			<view class="box">
				<view style="font-weight: 800; color: #6AC20B; font-size: 30px;!important ">
					0<text style="color: black; font-weight: 400">分</text>
				</view>
				<view>我的积分</view>
			</view>
		</view>
		<!-- 订单 积分 会员卡 服务中心区域 -->
		<view class="order" v-for="(item,index) in list">
			<img :src="item.img" alt="" />
			<view>
				{{item.title}}
			</view>
		</view>
		<button @click="handerLogin">
			点击
		</button>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				phone: "绑定手机号",
				list: [{
						img: '../../static/xiaoxi.png',
						title: '我的订单'
					},
					{
						img: '../../static/fangzi.png',
						title: '积分商城'
					},
					{
						img: '../../static/vip.png',
						title: '起点外卖会员卡'
					},
					{
						img: '../../static/liwu.png',
						title: '服务中心'
					},
				]
			}
		},
		computed: {
			...mapState(['username']),

		},
		methods: {
			handerLogin() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			headle_userEdit(){
				uni.navigateTo({
					url: '/pages/userDetail/userDetail'
				})
			}
		},

	}
</script>

<style scoped lang="scss">
	.img_box {
		width: 100%;
		height: 120px;
		// overflow-y: scroll;
		box-sizing: border-box;
		background-color: #0e932e;
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: space-between;

		.imgs {
			width: 30%;
			padding-left: 20px;
			box-sizing: border-box;
		}

		.message {
			padding-left: 0;
			color: #fff;
		}
		
		.user_edit{
			margin-right: 20px;
			font-size: 18px;
			color: white;
		}
	}

	li {
		list-style: none;
		text-align: center;
	}

	.account {
		padding: 0 15px;
		display: flex;
		align-items: center;
		text-align: center;
		height: 90px;
		border-bottom: solid 1px #ccc;

		text {
			font-size: 16px !important;
		}
	}

	.box {
		flex: 1;
	}

	.box:nth-child(1) {
		border-right: solid 1px #ccc;
	}

	.box:nth-child(2) {
		border-right: solid 1px #ccc;
	}

	.order {
		padding: 0 15px;
		width: 100%;
		height: 75px;
		border-bottom: solid 1px #ccc;
		display: flex;
		align-items: center;
		text-align: center;

		img {
			width: 25px;
			height: 25px;
			margin-right: 10px;
		}
	}

	button {
		background: #6AC20B;
		color: #fff;
	}
</style>